<template>
    <div class="login-container">
        <el-form ref="ruleFormRef" :hide-required-asterisk="true" :model="ruleForm" :rules="rules" label-width="120px"
            status-icon>
            <el-form-item label="账号" prop="username">
                <el-input placeholder="请输入账号" clearable v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" type="password" clearable v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item label="用户类型">
                <el-select v-model="ruleForm.type" class="m-2 select" placeholder="用户类型">
                    <el-option v-for="item in allUserType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { onActivated, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { commonPasswordLengthRule, getLengthRule, getRequireRule, phoneRule, userLengthRule } from "../../../../form";
import { loginApi, whoamiApi } from "../../../../api/login";
import { useUserStore } from '../../../../store/user';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { allUserType } from '../../../../select/user';
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username: "13414079720",
    password: "123456abc+",
    type: 12
})
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
onActivated(() => {
    const username: string = route.query.user as string;
    if (username) {
        ruleForm.username = username;
    }
})


whoamiApi().then(res => {
    const { data } = res;
    if (data) {
        userStore.setUser(data);
        ElMessage({
            message: "登录成功",
            type: "success"
        })
        router.push({
            name: "Home"
        })
    }
})




const rules: FormRules = {
    username: [
        getRequireRule("请输入账号"),
        userLengthRule,
        // phoneRule
    ],
    password: [
        getRequireRule("请输入密码"),
        commonPasswordLengthRule
    ]
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            const { code, msg, data } = await loginApi({
                phone: ruleForm.username,
                password: ruleForm.password,
                state: ruleForm.type
            })

            if (code === 200) {
                userStore.setUser(data);
                ElMessage({
                    message: "登录成功",
                    type: "success"
                })
                router.push({
                    name: "Jurisdiction"
                })
            } else {
                ElMessage({
                    message: msg,
                    type: "warning"
                })
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style lang="less" scoped>
.login-container {
    width: 80%;
    margin: 0 auto
}

.select {
    width: 100%;
}
</style>
  